<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsertRule">Insert Rule</el-button>
  </div>
  <div class="page-filter">
    <el-form
      inline
      :model="ruleListParams"
      :disabled="isLoadingList"
      @submit.prevent="handleGetRuleList"
    >
      <el-form-item label="Status">
        <el-select v-model="ruleListParams.is_show">
          <el-option value label="All"></el-option>
          <el-option value="1" label="Active"></el-option>
          <el-option value="0" label="Inactive"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Name">
        <el-input v-model="ruleListParams.keyword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="page-container" v-loading="isLoadingList">
    <vxe-table :data="ruleList" :tree-config="{ children: 'children' }" border="inner">
      <vxe-column field="id" title="ID" />
      <vxe-column field="menu_name" title="Name" tree-node />
      <vxe-column field="menu_path" title="Route" />
      <vxe-column field="api_url" title="API URL" />
      <vxe-column field="unique_auth" title="Unique Auth" />
      <vxe-column field="is_show" title="Status">
        <template #default="scope">
          <el-switch
            v-model="scope.row.is_show"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.loading"
            @change="handleSetStatus(scope.row)"
          ></el-switch>
        </template>
      </vxe-column>
      <vxe-column title="Action" fixed="right" align="right">
        <template #default="scope">
          <el-button type="text" @click="handleInsertRule(scope.row)">Insert</el-button>
          <el-button type="text" @click="handleUpdateRule(scope.row)">Edit</el-button>
          <el-popconfirm
            title="It cannot be restored after deletion. Are you sure you want to delete it ?"
            @confirm="handleDeleteRule(scope.row)"
          >
            <template #reference>
              <el-button type="text">Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </vxe-column>
    </vxe-table>
  </div>

  <EditRule
    v-model="isEditVisible"
    v-model:id="ruleID"
    v-model:parent-id="parentRuleID"
    :rule-list="ruleList"
    @submit="handleGetRuleList"
  />
</template>
<script setup lang="ts">
import { deleteRule, getRuleList, setRuleStatus } from '@/api/rule';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import EditRule from './edit.vue'

// 1. get rule list
const ruleList = ref<RuleType[]>([])

const ruleListParams = ref<RuleParamsType>({
  is_show: '',
  keyword: ''
})

const isLoadingList = ref(false)

function handleGetRuleList() {
  isLoadingList.value = true
  getRuleList(ruleListParams.value).then(res => {
    ruleList.value = res
  }).finally(() => {
    isLoadingList.value = false
  })
}

handleGetRuleList()

// 2. change rule status
function handleSetStatus(row: RuleType) {
  row.loading = true
  row.id && setRuleStatus(row.id, { is_show: row.is_show }).finally(() => {
    row.loading = false
  })
}

// 3. insert rule
const isEditVisible = ref(false)

function handleInsertRule(row?: RuleType) {
  isEditVisible.value = true
  if (row && row.id) {
    // ruleID.value = row.id
    parentRuleID.value = row.id
  }
}

// 4. update rule
function handleUpdateRule(row: RuleType) {
  isEditVisible.value = true
  if (row && row.id) {
    ruleID.value = row.id
  }
}

// 4. delete rule
function handleDeleteRule(row: RuleType) {
  row.id && deleteRule(row.id).then(() => {
    ElMessage.success('Delete successfully')
  }).finally(() => {
    handleGetRuleList()
  })
}

const ruleID = ref<number | null>(null)
const parentRuleID = ref<number | null>(null)
</script>